<template>
   <el-row :gutter="20" :style="{'margin-top':'15%'}">
     <el-col   :xs="{span:20,push:2}" :sm="{span:10,push:7}" :md="{span:8,push:8}" :lg="{span:6,push:9}" >
       <el-card shadow="always" >
         <el-form :model="user" ref="userForm" :rules="rules" label-width="80px" :inline="false" size="normal">
           <el-form-item label="账号：" prop="admin">
             <el-input type="text" v-model="user.admin" ></el-input>
           </el-form-item>
          <el-form-item label="密码：" prop="password">
             <el-input type="text" v-model="user.password"  show-password></el-input>
           </el-form-item>
          
         </el-form>
         <el-row :gutter="20">
            <el-col :span="24"  :style="{'text-align':'center'}">
             <el-button type="primary" @click="onSubmit">登录</el-button>
             <el-button @click="onReset()">重置</el-button>
            </el-col>
         </el-row>
         
         <el-row :gutter="20">
           <el-col :span="24"  :style="{'text-align':'center'}">
              <router-link to="/modifiy/password">忘记密码</router-link>
              |
              <router-link to="/registration">注册</router-link>
           </el-col>
         </el-row>
       </el-card>
     </el-col>
   </el-row>
</template>

<script lang="ts">
  import { Component, Vue, Ref } from 'vue-property-decorator';
  import {ElForm,ValidateCallback} from 'element-ui/types/form';
  import UserLogin from '@/domain/UserLogin';
  import http from '@/utils/request';
  import Rules,{Validator} from '@/domain/Rules';
  import router from "@/router/index";
  import {AxiosResponse} from "axios";

  //字符串中含有空字符
  let trimValidator:Validator=(rules:any,value:string,calllback:Function):void=>{
             if (value.length>value.trim().length) {
               calllback(new Error('不能含有空格'));
               return;
             }
             calllback();
  };

   @Component
   class Login extends Vue {
      user:UserLogin={password:"",admin:""};
      readonly rules:Rules={
        "admin":[
          {
          "trigger":"change",
          "required":true,
          "message":"请输入账号"
          },
          {
          "trigger":"change",
          "min":1,
          "max":20,
          "message":"账号字符在1-20"
          },
          {
          "trigger":"change",
          "validator":trimValidator,
          "message":"账号不能存在空字符"
          },
        ],
        "password":[
                   {
          "trigger":"change",
          "required":true,
          "message":"请输入密码"
          },
          {
          "trigger":"change",
          "min":6,
          "max":20,
          "message":"密码字符在6-20"
          },
          {
          "trigger":"change",
          "validator":trimValidator,
          "message":"密码不能存在空字符"
          },
        ]
      };


      @Ref('userForm')  readonly userform!:ElForm;

      onSubmit():void{
        //参数校验
        let  callback:ValidateCallback= (isValid: boolean, invalidFields: object): void=>{
          if(isValid){
            http({
              url:'/user/login',
              method:'post',
              data:this.user,
            }).then((resp:AxiosResponse<any>):void=>{
              console.log(resp)
              localStorage.setItem('token',resp.data);
              router.push('/home').catch((msg:any):void=>{});
                  
            })
            return;
          }
          console.error('请求参数校验失败')
        };
        this.userform.validate(callback)
      }

      onReset():void{
        this.userform.resetFields();
      }
  }
  export default Login;
</script>
